<div class="content-warp">
  <div class="content-header">
    <i class="anticon anticon-left-circle-o" (click)="goBack()"></i>
    <span class="content-title">新建{{activityName}}</span>
  </div>
  <div class="content-body">
    <nz-spin [nzSpinning]="_isSpinning">
      <form nz-form [formGroup]="validateForm">
        <div nz-form-item nz-row>
          <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>策划页名称：</div>
          <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('title')">
            <div class="p-pr" style="width:300px;">
            					            	<textarea
                                      formControlName="title"
                                      placeholder="请输入策划页名称"
                                      class="ant-input ng-pristine ng-valid ng-touched"
                                      rows="2"
                                      style="width:300px;" maxlength="30"></textarea>
              <div style="position: absolute;right: 8px;bottom: 0px;color: #999;">{{30-(validateForm.controls.title.value?validateForm.controls.title.value.length:0) }}
              </div>
            </div>
            <!--<nz-input [nzSize]="'large'" formControlName="name" [nzPlaceHolder]="'请输入活动名称'"></nz-input>-->
            <div nz-form-explain *ngIf="getFormControl('title').dirty&&getFormControl('title').hasError('required')">请输入策划页名称</div>
            <div nz-form-explain *ngIf="getFormControl('title').dirty&&getFormControl('title').hasError('maxlength')">策划页名称不能超过30个字</div>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">选择商品：</div>
          <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
            <div class="init-content">
              <button nz-button [nzType]="'primary'" (click)="addGoods()">
                <span><i  [ngClass]="{'anticon anticon-plus':checkedGoodsInfo.length === 0 }"></i> {{ checkedGoodsInfo.length === 0 ? '添加商品' : '编辑商品' }}</span>
              </button>
            </div>
            <ng-container *ngIf="!!checkedGoodsInfo.length">
              <div class="checked-goods-container" *ngFor="let item of checkedGoodsInfo;let i = index;">
                <div class="name">
                  <img src="{{aliyunOssOutputUrl+'/'+item.first_picture}}" alt="">
                  <div>{{item.name}}</div>
                </div>
                <div class="info">
                  <div>
                    <span class="title">商品分类</span>
                    <nz-tag [nzColor]="'#fff'" *ngFor="let ite of item.goods_category">{{ite}}</nz-tag>
                    <span *ngIf="item.goods_category ? !item.goods_category.length : true">无分类</span>
                  </div>
                  <div><span class="title">商品库存</span> <span>{{item.in_stock}}</span></div>
                </div>
                <span class="delete-prize-btn" (click)="deleteGoods(i)"><i class="anticon anticon-close-circle-o"></i></span>
                <!--<div nz-form-explain *ngIf="item.error['goods']">请选择商品</div>-->
              </div>
            </ng-container>
          </div>
        </div>
        <!--<div nz-form-item nz-row *ngIf="skuStatus">-->
        <!--<div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>商品属性：</div>-->
        <!--<div nz-form-control nz-col [nzSm]="14" [nzXs]="24">-->
        <!--<label nz-checkbox *ngFor="let it of item['sku']" [ngModelOptions]="{standalone: true}" [(ngModel)]="item.checked" (ngModelChange)="dealSku()">-->
        <!--<span>{{it.name||it.describe||'无规格'}}</span>-->
        <!--</label>-->
        <!--<div nz-form-explain *ngIf="!item['hasCheckedSku']">请至少选择一个商品属性</div>-->
        <!--</div>-->
        <!--</div>-->


        <div nz-form-item nz-row>
          <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">选择活动：</div>
          <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
            <div class="init-content">
              <button nz-button [nzType]="'primary'" (click)="addActivity()">
                <span><i [ngClass]="{'anticon anticon-plus': checkedActivityInfo.length === 0 }"></i>{{ checkedActivityInfo.length === 0 ? '添加活动': '更改活动' }}</span>
              </button>
            </div>
            <ng-container *ngIf="!!checkedActivityInfo.length">
              <div class="checked-goods-container" *ngFor="let item of checkedActivityInfo; let i = index;">
                <div class="name">
                  <nz-tag [nzColor]="item['type']['color']">{{ item['type']['text'] }}</nz-tag>
                  <span>{{ item['name'] }}</span>
                </div>
                <div class="info">
                  <span class="title">活动有效期:</span>
                  <span class="title-content">从 {{ item['start_date'] }} 至 {{ item['end_date'] }}</span>
                  <span class="view-goods-btn" (click)="toggleViewActivityGoods(i)" >查看商品<i class="anticon" [ngClass]="{'anticon-up':item['flexable'],'anticon-down':!item['flexable']}"></i></span>
                </div>
                <div class="goods-wrap" *ngIf="item['flexable']">
                  <div>
                    <div>ID:{{ item['goodsDetail']['id'] }}</div>
                    <div class="goods-bt">
                      <div class="goods-name">{{ item['goodsDetail']['goods_name'] }}</div>
                      <div class="goods-right">
                        <div>商品价格</div>
                        <div>￥ {{ item['goodsDetail']['price'] }}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <span class="delete-prize-btn" (click)="deleteActivity(i)"><i class="anticon anticon-close-circle-o"></i></span>
              </div>
            </ng-container>
          </div>
        </div>

        <div nz-form-item nz-row>
          <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>展示封面：</div>
          <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
            <div>
              <app-upload [(fileList)]="fileList" [(piclist)]="picList" [picSizeInfo]="picSizeInfo" [canChange]="true" (piclistChange)="fileChange()"
                          (fileListChange)="fileChange()"></app-upload>
            </div>
            <div nz-form-explain *ngIf="picError">请至少上传一张图片</div>
          </div>
        </div>

        <div nz-form-item nz-row>
          <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">商品描述：</div>
          <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" style="z-index:1">
            <editor (onPostData)="PostData($event)"></editor>
          </div>
        </div>

        <div nz-form-item nz-row style="margin-bottom:8px;">
          <div nz-form-control nz-col [nzSpan]="14" [nzOffset]="9">
            <button nz-button [nzSize]="'large'" [nzType]="'primary'" [nzLoading]="submitStatus" (click)="_submitForm()">确 认</button>
            <button nz-button [nzSize]="'large'" [nzType]="'default'" type="button" (click)="goBack()" style="margin-left: 20px">取 消</button>
          </div>
        </div>
      </form>
    </nz-spin>
  </div>
</div>

<!-- 添加商品弹窗 start -->
<nz-modal
  [nzVisible]="goodsModalVisible"
  [nzTitle]="'添加商品'"
  [nzWidth]="'700px'"
  [nzContent]="modalContent"
  (nzOnCancel)="closeModal()"
  (nzOnOk)="confirmCheckedGoods()"
  [nzConfirmLoading]="isConfirmLoading"
>
  <ng-template #modalContent>
    <div class="operate-line text-right">
      <nz-select
        style="width: 110px;"
        nzAllowClear
        [nzSize]="'large'"
        [nzPlaceHolder]="'请选择分类'"
        [(ngModel)]="selectedGroup"
        [nzShowSearch]="true">
        <nz-option
          *ngFor="let type of groupList"
          [nzLabel]="type.name"
          [nzValue]="type.id">
        </nz-option>
      </nz-select>
      <nz-input name="goodsName" style="width: 200px;" [nzSize]="'large'" [(ngModel)]="keyword" (keydown)="keyDown($event,1)" [nzPlaceHolder]="'输入商品名称'"></nz-input>
      <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="searchGoods()">
        <span>查 询</span>
      </button>
      <button nz-button [nzType]="'default'" [nzSize]="'large'" (click)="resetGoods()">
        <span>重 置</span>
      </button>
    </div>
    <nz-table #nzTable
              [nzAjaxData]="goodsList"
              [nzLoading]="loading"
              [(nzPageIndex)]="page"
              [(nzPageSize)]="pageSize"
              [nzTotal] ="total"
              (nzPageIndexChange)="getGoodsList()">
      <thead nz-thead>
      <tr>
        <th nz-th nzCheckbox>
        </th>
        <th nz-th><span>商品</span></th>
        <th nz-th><span>商品库存</span></th>
      </tr>
      </thead>
      <tbody nz-tbody>
      <tr nz-tbody-tr *ngFor="let data of goodsList">
        <td nz-td nzCheckbox>
          <label nz-checkbox (ngModelChange)="dealGoods($event,data)" [(ngModel)]="data.checked">
          </label>
        </td>
        <td nz-td style="width: 420px;">
          <img class="goods-pic" src="{{aliyunOssOutputUrl+'/'+data.first_picture}}" alt="">
          <div class="goods-info">
            <div class="goods-num">
              <span class="product-id mr-5" *ngIf="data.goods_number">
                <nz-popover [nzTitle]="'商品编号'" *ngIf="data.goods_number.length>1" >
                  <span  nz-popover>商品编号:{{ data.goods_number[0]+"..." }}</span>
                  <ng-template #nzTemplate>
                    <div style="max-width:300px">
                      <span class="dis-inline" *ngFor="let item2 of  data.goods_number;let i2=index">
                        <span style="display:inline-block;width:80px;">{{item2}}</span><span *ngIf="i2!=data.goods_number.length-1" class="ml-5 mr-5">|</span>
                      </span>
                    </div>
                  </ng-template>
                </nz-popover>
                <span *ngIf="data.goods_number.length==1">
                  商品编号:{{ data.goods_number[0] }}
                </span>
              </span>
              <div class="dis-inline"><nz-tag [nzColor]="'#1790FF'" *ngFor="let ite of data.goods_category">{{ite}}</nz-tag></div>
            </div>
            <div class="goods-name">{{data.name}}</div>
          </div>
        </td>
        <td nz-td>
          <div style="margin-right: 30px;">
            {{data.in_stock}}
            <nz-progress [ngModel]="50" [nzShowInfo]="false"></nz-progress>
          </div>
        </td>
      </tr>
      </tbody>
    </nz-table>
  </ng-template>
</nz-modal>
<!-- 添加商品弹窗 end -->


<!-- 添加活动弹窗 -->
<nz-modal
  [nzVisible]="activityModalVisible"
  [nzTitle]="'添加活动'"
  [nzWidth]="'700px'"
  [nzContent]="activityModalContent"
  [nzConfirmLoading]="isConfirmActivityLoading"
  (nzOnCancel)="closeActivityModal()"
  (nzOnOk)="confirmCheckedActivity()"
>
  <ng-template #activityModalContent>
    <div class="operate-line text-right">
      <nz-input name="goodsName" style="width: 200px;" [nzSize]="'large'" [(ngModel)]="keyword" (keydown)="keyDown($event,2)" [nzPlaceHolder]="'输入活动名称'"></nz-input>
      <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="searchActivity()">
        <span>查 询</span>
      </button>
      <button nz-button [nzType]="'default'" [nzSize]="'large'" (click)="resetActivity()">
        <span>重 置</span>
      </button>
    </div>
    <nz-table
      #activityTable
      [nzAjaxData]="activityList"
      [nzLoading]="activityLoading"
      [(nzPageIndex)]="page"
      [(nzPageSize)]="pageSize"
      [nzTotal]="activitiesTotal"
      (nzPageIndexChange)="getActivityList()"
    >
      <thead nz-thead>
      <tr>
        <th nz-th nzCheckbox style="width:80px;">
        </th>
        <th nz-th style="width: 240px;">
          <span>活动</span>
        </th>
        <th nz-th>
          <span>活动有限期</span>
        </th>
        <th nz-th>
          <span>活动商品</span>
        </th>
      </tr>
      </thead>
      <tbody nz-tbody>
      <ng-container *ngFor="let data of activityList;let i = index;">
        <tr nz-tbody-tr>
          <td nz-td nzCheckbox>
            <label nz-checkbox (ngModelChange)="dealActivity($event,data)" [(ngModel)]="data.checked"></label>
          </td>
          <td nz-td>
            <div class="goods-info">
              <div class="goods-num">
                  <span class="product-id mr-5">
                    <span>ID:{{ data['id'] }}</span>
                  </span>
                <div class="dis-inline">
                  <nz-tag [nzColor]="'rgb(252,99,16)'" *ngIf="data['activity_goods'][0]['type'] === 1">普通拼团</nz-tag>
                </div>
                <div class="dis-inline">
                  <nz-tag [nzColor]="'rgb(252,30,16)'" *ngIf="data['activity_goods'][0]['type'] === 2">拉新拼团</nz-tag>
                </div>
                <div class="dis-inline">
                  <nz-tag [nzColor]="'rgb(252,40,16)'" *ngIf="data['activity_goods'][0]['type'] === 3">抽奖拼团</nz-tag>
                </div>
                <div class="dis-inline">
                  <nz-tag [nzColor]="'rgb(252,60,16)'" *ngIf="data['activity_goods'][0]['type'] === 4">团长免单</nz-tag>
                </div>
              </div>
              <div class="goods-name">{{data['name']}}</div>
            </div>
          </td>
          <td nz-td style="font-size: 12px;">
            <div>{{data['start_date']}}</div>
            <div>{{ data['end_date'] }}</div>
          </td>
          <td nz-td>
            <div style="margin-right: 30px;">
                <span style="color: #0F8EE9;font-size: 12px;cursor: pointer;" (click)="toggleFlexable(i)">查看活动商品
                  <i class="anticon" [ngClass]="{'anticon-up':data['flexable'],'anticon-down':!data['flexable']}"></i>
                </span>
            </div>
          </td>
        </tr>
        <!--<ng-container *ngIf="data['flexable'] && data['goodsDetail']">-->
          <!--<tr>-->
            <!--<td nz-td>-->
              <!--<img class="goods-preview" src="{{ aliyunOssOutputUrl + '/' + data['goodsDetail']['first_picture']  }}" alt="">-->
            <!--</td>-->
            <!--<td [attr.colspan]="2" nz-td>-->
              <!--<div style="color: rgba(0,0,0,0.80);">ID:{{ data['goodsDetail']['id'] }}</div>-->
              <!--<div>{{ data['goodsDetail']['goods_name'] }}</div>-->
            <!--</td>-->
            <!--<td nz-td>-->
              <!--<div style="color: rgba(0,0,0,0.80);">商品价格</div>-->
              <!--<div>￥ {{ data['goodsDetail']['price'] }}</div>-->
            <!--</td>-->
          <!--</tr>-->
        <!--</ng-container>-->
      </ng-container>
      </tbody>
    </nz-table>
  </ng-template>
</nz-modal>
<!-- 添加活动弹窗 end -->
